<template>
  <div class="buttons" style="padding:10px;width: 100%;">
    <el-select @change="changeYear" v-model="year" placeholder="请选择">
      <el-option
        v-for="item in years"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        :class="timeOption"
      ></el-option>
    </el-select>

    <div v-for="(item,index) in months" :key="item.value">
      <div
        class="disableBtn"
        v-if="(maxMonth < index && thisYear === year && index !== 0) || (thisYear < year && index !== 0)"
      >{{item.name}}</div>
      <div
        v-else
        @click="changeMonth(item)"
        class="buttonItem"
        :class="Number(month) === index ?  'activeItem': ''"
      >{{item.name}}</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      years: [
        {
          value: 2018,
          label: "2018年"
        },
        {
          value: 2019,
          label: "2019年"
        }
      ],
      months: [
        {
          name: "全年",
          value: "0"
        },
        {
          name: "1月",
          value: "01"
        },
        {
          name: "2月",
          value: "02"
        },
        {
          name: "3月",
          value: "03"
        },
        {
          name: "4月",
          value: "04"
        },
        {
          name: "5月",
          value: "05"
        },
        {
          name: "6月",
          value: "06"
        },
        {
          name: "7月",
          value: "07"
        },
        {
          name: "8月",
          value: "08"
        },
        {
          name: "9月",
          value: "09"
        },
        {
          name: "10月",
          value: "10"
        },
        {
          name: "11月",
          value: "11"
        },
        {
          name: "12月",
          value: "12"
        }
      ],
      year: 2018,
      month: 1,
      maxMonth: 1,
      thisYear: 2018,
      gTime: new Date()
    };
  },
  mounted() {
    this.emitTime();
  },

  methods: {
    emitTime() {
      this.$set(this, "year", this.gTime.getFullYear());
      this.$set(this, "thisYear", this.gTime.getFullYear());
      this.$set(this, "month", this.gTime.getMonth() + 1);
      this.$set(this, "maxMonth", this.gTime.getMonth() + 1);
      var date = {
        startTime: this.year + "-" + this.month + "-" + "01",
        endTime: this.year + "-" + this.month + "-" + this.gTime.getDate(),
        timeType: "3008"
      };
      this.$emit("onTime", date);
    },
    changeMonth(res) {
      this.$set(this, "month", res.value);
      var date = {};
      if (res.value === "0") {
        date = {
          startTime: this.year + "-01-01",
          endTime: this.year + "-12-31",
          timeType: "3010"
        };
      } else {
        var day = new Date(this.year, res.value, 0);
        var daycount = day.getDate();
        date = {
          startTime: this.year + "-" + this.month + "-" + "01",
          endTime: this.year + "-" + this.month + "-" + daycount,
          timeType: "3008"
        };
      }
      this.$emit("onTime", date);
    },
    changeYear(res) {
      var date = {};
      if (res === this.gTime.getFullYear()) {
        this.$set(this, "month", this.gTime.getMonth() + 1);
        date = {
          startTime: res + "-" + this.month + "-" + "01",
          endTime: res + "-" + this.month + "-" + this.gTime.getDate(),
          timeType: "3008"
        };
      } else {
        this.$set(this, "month", "0");
        date = {
          startTime: res + "-01-01",
          endTime: res + "-12-31",
          timeType: "3010"
        };
      }
      this.$emit("onTime", date);
    }
  }
};
</script>

<style lang="scss">
@import "../../styles/element-ui/date/dateLeft.css";
@import "../../styles/bossVersion/_basics.scss";

.buttons {
  // select
  .el-select .el-input.is-focus .el-input__inner {
    height: 64px;
    line-height: 60px;
    color: $mainBlue;
    background-color: rgba(#090928, 0.5);
    border-color: transparent;
  }
  .el-input__inner {
    width: 160px;
    height: 64px;
    line-height: 60px;
    color: $mainBlue;
    @include bold(26px);
    text-align: center;
    background-color: rgba(#090928, 0.5);
    border-color: transparent;
  }
  .el-select:hover .el-input__inner {
    border-color: transparent;
  }
  .el-input__suffix {
    right: 15px;
  }
  .el-icon-arrow-up:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 8px;
    background: url("../../../static/img/bossVersion/sel_arrow.png") center
      no-repeat;
    background-size: 100% 100%;
    transform: rotateZ(180deg);
  }
}

/* select > option 样式改变，因在body结束标签前，控制全局 */
.el-select-dropdown {
  background-color: rgba(#090928, 0.5);
  border-radius: 0;
  box-shadow: none;
}
.el-select-dropdown__list {
  padding: 0;
}
.el-select-dropdown__item {
  height: 64px;
  line-height: 60px;
  padding: 0 30px 0 15px;
  color: rgba($mainBlue, 0.3);
  @include bold(26px);
  text-align: center;
}
.el-popper[x-placement^="bottom"] {
  margin: 0;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: transparent;
}
.el-select-dropdown__item.selected {
  color: $mainBlue;
}
</style>

<style scoped lang="scss">
@import "../../styles/bossVersion/_basics.scss";
.buttons {
  display: flex;
  padding: 0 !important;
  .buttonItem {
    width: 64px;
    height: 64px;
    line-height: 64px;
    margin: 0px 0px 0px 10px;
    background: rgba($color: #090928, $alpha: 0.5);
    color: $mainBlue;
    text-align: center;
    cursor: pointer;
    font-size: 22px;
  }
  .activeItem {
    background: rgba($color: #090928, $alpha: 0.8);
    border: 1px solid $mainBlue;
  }
  .disableBtn {
    width: 64px;
    height: 64px;
    line-height: 60px;
    margin: 0px 0px 0px 10px;
    background: rgba($color: #090928, $alpha: 0.2);
    color: rgba($color: $mainBlue, $alpha: 0.3);
    cursor: not-allowed;
    text-align: center;
    @include din(22px);
  }
}
</style>

